<template>
    <view>
        <!-- parse <include src="../component/navigationBar.wxml"></include> -->
        <block>
            <view class="navigationBox" :style="'padding-top:' + nTop + 'px;height:' + nHeight + 'px;line-height:' + nHeight + 'px;--color:' + color + ';'">
                <view class="nBar" :style="'height:' + nHeight + 'px;top:' + nTop + 'px'">
                    <navigator class="ico" hoverClass="none" :openType="pages.length == 1 ? 'switchTab' : 'navigateBack'" :url="pages.length == 1 ? '/pages/index/index4' : ''">
                        {{ pages.length == 1 ? '' : '' }}
                    </navigator>
                    <view class="title">{{ nTitle }}</view>
                </view>
            </view>
        </block>
        <scroll-view
            @refresherrefresh="onPullDownRefresh"
            @scroll="binnd_scroll"
            @scrolltolower="onReachBottom"
            class="list"
            :enableBackToTop="true"
            :enableFlex="true"
            lowerThreshold="300"
            :refresherEnabled="true"
            :refresherTriggered="triggered"
            :scrollTop="scrolltopNum_index"
            :scrollWithAnimation="true"
            :scrollY="true"
            :style="'margin-top:' + nTH + 'px;height:-webkit-calc(100vh - ' + nTH + 'px);--color:' + color + ';--rgbcolor:' + rgbcolor + ';'"
        >
            <view class="tab2">
                <view @tap="tFn" :class="'a' + (globalUtils.empty(t) || t == 1 ? ' ed' : '')" data-t="1">
                    <view class="i _new ico"></view>
                    <text class="span">最新</text>
                </view>
                <view @tap="tFn" :class="'a' + (t == 2 ? ' ed' : '')" data-t="2">
                    <view class="i _my ico"></view>
                    <text class="span">我的</text>
                </view>
                <view @tap="soFn" class="a">
                    <view class="i _so ico"></view>
                    <text class="span">筛选</text>
                </view>
            </view>
            <block v-if="LIST.length > 0" v-for="(dl, index) in LIST" :key="index">
                <navigator hoverClass="none" :url="'qun_detail?id=' + item.id" v-for="(item, index1) in dl" :key="index1">
                    <view class="dt">
                        <image mode="aspectFill" :src="item.path_s"></image>
                    </view>

                    <view class="dd">
                        <view class="h4">{{ item.title }}</view>
                        <view class="h5">{{ item.title2 }}</view>
                        <view class="ul">
                            <text class="li" v-for="(item2, index2) in item.tag" :key="index2">{{ item2 }}</text>
                        </view>
                        <view class="em">
                            <image mode="aspectFill" :src="item3" v-for="(item3, index2) in item.ulist" :key="index2"></image>
                        </view>
                    </view>

                    <view class="join ico">{{ item.ifin == 1 ? '已加入' : '加群' }}</view>

                    <view class="area ico" v-if="!globalUtils.empty(item.areatitle)"> {{ item.areatitle }}</view>
                </navigator>
            </block>
            <view class="nodata" v-if="nodata && LIST.length == 0">
                <image mode="aspectFit" src="/static/res/img/nodata.png"></image>
                暂无符合条件的内容　
                <text @tap="nodatabackFn" data-sokind="default" :style="'color:' + color">返回</text>
            </view>
            <view class="loading" v-if="loading_flag">
                <image class="loading_ico" src="/static/res/img/loading_ico.svg" v-if="loading_ico_flag"></image>
                <text>{{ loading_str }}</text>
            </view>
            <view class="blank">　</view>
        </scroll-view>
        <view @tap.stop.prevent="div_right_close_Fn" :class="'mask1 div_right_mask ' + div_right_mask_class" v-if="div_right_flag">
            <view @tap.stop.prevent="div_right_boxFn" :class="'div_right_box ' + div_right_box_class">
                <view class="div_left_so">
                    <view class="tbody">{{ nTitle }}筛选</view>
                    <form @submit="trend_form_uid_submitFn" class="form_uid">
                        <input
                            autocomplete="off"
                            @blur="SO_uid_bindblurFn"
                            @confirm="trend_input_uid_submitFn"
                            class="input"
                            confirmType="search"
                            maxlength="20"
                            name="keyword"
                            placeholder="按群ID/名称/标签/地区"
                            type="text"
                            :value="keyword"
                        />
                        <button class="ico" formType="submit" style="z-index: 9"></button>
                        <input hidden name="sokind" type="text" value="keyword" />
                    </form>
                    <form @submit="trend_form_ext_submitFn" @reset.stop.prevent="trend_form_ext_resetFn" class="form_ext" :style="'--color:' + color + ';--rgbcolor:' + rgbcolor">
                        <view class="tbox" v-for="(item, idx) in trendSO" :key="idx">
                            <view class="h5 on">{{ item.tbody }}</view>

                            <view class="ul def col3">
                                <view
                                    @tap="trend_form_ext_liFn"
                                    :class="'li' + (globalUtils.indexOf(item.v, item2.i) ? ' ed' : '')"
                                    :data-fkind="item.fkind"
                                    :data-idx="idx"
                                    :data-v="item2.i"
                                    v-for="(item2, idx2) in item.arr"
                                    :key="idx2"
                                >
                                    {{ item2.v }}
                                </view>
                            </view>

                            <input hidden :name="item.f" type="text" :value="item.v" />
                        </view>
                        <view class="savebox">
                            <button class="reset" formType="reset">重置</button>
                            <button class="ico" formType="submit"> 确定</button>
                        </view>
                        <view class="blank"></view>
                    </form>
                </view>
            </view>
        </view>
        <view @tap="backtopFn" class="backtop fadeInUp" data-id="index" :style="'color:' + color" v-if="backtop_flag">
            <text class="ico icon-backtop"></text>
            顶部
        </view>
        <!-- parse <include src="../login.wxml"></include> -->
        <block>
            <view class="mask3 alpha0_100" v-if="div_login">
                <view
                    class="div_box big_normal"
                    style="--div_box_width: 82%; --div_box_height: 666rpx; background: -webkit-linear-gradient(top, #fde9ee 1%, #fff 150%); background-color: #fff"
                >
                    <view class="m" :style="'border-color:rgba(' + rgbcolor + ',.2);'">
                        <image mode="aspectFit" src="/static/res/img/photo_m.png"></image>
                    </view>
                    <view class="S22 B">登录后获得更精准推荐</view>
                    <view class="loginagree">
                        <checkbox-group @change="ifagreeFn">
                            <label style="margin-left: -10rpx">
                                <checkbox :style="'--color:' + color + ';'" value="1"></checkbox>
                                <text class="C666 vmiddle">阅读并同意</text>
                            </label>
                        </checkbox-group>
                        <navigator class="vmiddle" hoverClass="none" :style="'color:' + color" url="/pagesA/about/law?kind=agreement">用户协议</navigator>
                        <text class="C666 vmiddle">与</text>
                        <navigator class="vmiddle" hoverClass="none" :style="'color:' + color + ';'" url="/pagesA/about/law?kind=declara">隐私条款</navigator>
                    </view>
                    <button
                        @getphonenumber="getPhoneNumber"
                        class="btn5 W90_"
                        openType="getPhoneNumber"
                        :style="'--color:' + color + ';--rgbcolor:' + rgbcolor + ';width:73%'"
                        v-if="ifagree"
                    >
                        <text>手机号快捷登录</text>
                        <text :style="'color: ' + color + ';'">私密</text>
                    </button>
                    <button @tap="ifagree_passFn" class="btn5" :style="'--color:' + color + ';--rgbcolor:' + rgbcolor + ';width:73%'" v-else>
                        <text>手机号快捷登录</text>
                        <text :style="'color: ' + color + ';'">私密</text>
                    </button>
                    <view @tap="back" class="C666">
                        <text style="border-bottom: #999 1px solid">暂不登录</text>
                    </view>
                </view>
            </view>
        </block>
    </view>
</template>
<script>
import globalUtils from "../../res/www.a9a.cn";

var t;
var i;
var a = require('../../@babel/runtime/helpers/defineProperty');
var n = require('../../res/www.a9a.cn.js');
var app = getApp();
var o = 2;
var r = true;
export default {
  computed: {
    globalUtils() {
      return globalUtils
    }
  },
    data() {
        return {
            nTitle: '单身群',
            t: 0,
            triggered: true,
            loading_flag: false,
            loading_ico_flag: false,
            loading_str: '玩命加载中',
            color: '',
            rgbcolor: '',
            LIST: [],
            nodata: false,
            keyword: '',
            SO: '',
            SHARE: '',
            div_login: false,
            div_right_mask_class: '',
            div_right_box_class: '',
            div_right_flag: false,
            backtop_flag: false,
            nTop: '',
            nHeight: '',
            pages: [],
            scrolltopNum_index: 0,
            nTH: '',
            dl: [],
            trendSO: [],
            idx2: 0,
            ifagree: ''
        };
    },
    onLoad: function (t) {
        var that = this;
        uni.setNavigationBarTitle({
            title: that.nTitle
        });
        app.globalData.get_config('_ZEAI').then(function (t) {
            that.setData({
                color: app.globalData._ZEAI.color,
                rgbcolor: n.c16_rgb(app.globalData._ZEAI.color)
            });
        });
        app.globalData.get_navigationBarTopHeight(that);
        this.init();
    },
    onPullDownRefresh: function () {
        var that = this;
        uni.vibrateShort({
            type: 'heavy'
        });
        setTimeout(function () {
            that.setData({
                triggered: false,
                loading_flag: false,
                loading_str: '拼命加载中',
                LIST: [],
                nodata: false,
                t: 0,
                keyword: ''
            });
            that.setloading('end', '拼命加载中');
            o = 2;
            i = {};
            that.init();
        }, 500);
    },
    onReachBottom: function () {
        var i = this.LIST;
        var that = this;
        if (r) {
            r = false;
            that.setloading('start', '拼命加载中');
            var s = {
                submitok: 'qun',
                p: o,
                openid: t.openid,
                t: that.t
            };
            app.globalData.ajax({
                url: 'qun.php',
                data: s,
                success: function (t) {
                    if (1 == t.flag) {
                        var e = i.length;
                        if (t.LIST.length < 1) {
                            that.setloading('end', '已全部加载完毕');
                            return void (r = false);
                        }
                        that.setData(a({}, 'LIST[' + e + ']', t.LIST));
                        o += 1;
                        r = true;
                    } else {
                        uni.showToast({
                            title: t.msg,
                            icon: 'none',
                            mask: true
                        });
                    }
                    that.setloading('end', '上拉加载更多');
                }
            });
        }
    },
    onShareAppMessage: function (t) {
        return {
            imageUrl: this.SHARE.imgurl,
            title: this.SHARE.title,
            path: '/pagesA/qun/qun'
        };
    },
    onShareTimeline: function () {
        return {
            imageUrl: this.SHARE.imgurl,
            title: this.SHARE.title,
            query: '',
            path: '/pagesA/qun/qun'
        };
    },
    methods: {
        init: function () {
            var that = this;
            uni.showLoading({
                title: '玩命加载中...',
                mask: true
            });
            r = false;
            var s = {
                submitok: 'qun',
                openid: (t = uni.getStorageSync('COOK_U')).openid,
                t: that.t
            };
            n.empty(i) || (s = JSON.parse((JSON.stringify(s) + JSON.stringify(i)).replace(/}{/, ',')));
            app.globalData.ajax({
                url: 'qun.php',
                data: s,
                success: function (t) {
                    var i;
                    r = true;
                    uni.hideLoading();
                    if (1 == t.flag) {
                        uni.setNavigationBarTitle({
                            title: t.nTitle
                        });
                        if (0 == t.LIST.length) {
                            that.setData({
                                LIST: [],
                                nodata: true,
                                SO: t.SO,
                                nTitle: t.nTitle,
                                SHARE: t.SHARE
                            });
                        } else {
                            that.setData((a((i = {}), 'LIST[0]', t.LIST), a(i, 'trendSO', t.SO), a(i, 'nTitle', t.nTitle), a(i, 'SHARE', t.SHARE), i));
                        }
                    } else {
                        'nologin' == t.flag
                            ? uni.navigateTo({
                                  url: '/pages/login/login'
                              })
                            : uni.showToast({
                                  title: t.msg,
                                  icon: 'none',
                                  mask: true
                              });
                    }
                }
            });
        },

        tFn: function (t) {
            var that = this;
            var a = t.currentTarget.dataset.t;
            2 == a
                ? app.globalData.chklogin().then(function (t) {
                      t
                          ? that.tFninit(a)
                          : uni.navigateTo({
                                url: '/pages/login/login'
                            });
                  })
                : that.tFninit(a);
        },

        tFninit: function (t) {
            this.setData({
                triggered: false,
                loading_flag: false,
                loading_str: '拼命加载中',
                LIST: [],
                nodata: false,
                t: t,
                keyword: ''
            });
            i = {};
            this.init();
        },

        getPhoneNumber: function (t) {
            app.globalData.getPhoneNumber({
                e: t,
                url: '/pagesA/reg/reg',
                urlkind: 'navigateTo'
            });
        },

        back: function () {
            this.setData({
                div_login: false
            });
        },

        nodatabackFn: function () {
            this.setData({
                triggered: false,
                loading_flag: false,
                loading_str: '拼命加载中',
                LIST: [],
                nodata: false,
                t: 0,
                keyword: ''
            });
            i = {};
            this.init();
        },

        soFn: function () {
            this.setData({
                div_right_mask_class: 'alpha0_100',
                div_right_box_class: 'div_leftAnm1',
                div_right_flag: true
            });
        },

        SO_uid_bindblurFn: function (t) {
            var i = t.detail.value;
            this.setData({
                keyword: i
            });
        },

        div_right_boxFn: function () {},

        trend_form_uid_submitFn: function (t) {
            var a = t.detail.value.keyword;
            i = {
                keyword: a
            };
            this.div_right_close_Fn();
            this.init();
        },

        trend_input_uid_submitFn: function (t) {
            var a = t.detail.value;
            i = {
                keyword: a
            };
            this.div_right_close_Fn();
            this.init();
        },

        trend_form_ext_liFn: function (t) {
            var i;
            var e = t.currentTarget.dataset.idx;
            var o = t.currentTarget.dataset.v;
            var r = t.currentTarget.dataset.fkind;
            var s = this.trendSO[e].v;
            i = n.empty(s) ? o : 'checkbox' == r ? (n.indexOf(s, o) ? (i = n.json_remove(s, o)).join(',') : s + ',' + o) : o;
            if (0 == o) {
                i = 0;
            }
            this.setData(a({}, 'trendSO[' + e + '].v', i));
        },

        trend_form_ext_submitFn: function (t) {
            (i = t.detail.value).keyword = this.keyword;
            this.div_right_close_Fn();
            this.init();
        },

        trend_form_ext_resetFn: function (t) {
            var i = this.trendSO;
            for (var n in i) {
                this.setData(a({}, 'trendSO[' + n + '].v', 0));
            }
            this.setData({
                keyword: ''
            });
        },

        trend_soFn: function () {
            this.setData({
                div_right_mask_class: 'alpha0_100',
                div_right_box_class: 'div_leftAnm1',
                div_right_flag: true
            });
        },

        div_right_close_Fn: function () {
            var that = this;
            this.setData({
                div_right_mask_class: 'alpha100_0',
                div_right_box_class: 'div_leftAnm2'
            });
            setTimeout(function () {
                that.setData({
                    div_right_flag: false
                });
            }, 500);
        },

        setloading: function (t, i) {
            'start' == t
                ? this.setData({
                      loading_flag: true,
                      loading_ico_flag: true,
                      loading_str: i
                  })
                : this.setData({
                      loading_flag: false,
                      loading_ico_flag: false,
                      loading_str: i
                  });
        },

        binnd_scroll: function (t) {
            t.detail.scrollTop > 100
                ? this.setData({
                      backtop_flag: true
                  })
                : this.setData({
                      backtop_flag: false
                  });
        },

        backtopFn: function (t) {
            var i = 'scrolltopNum_' + t.currentTarget.dataset.id;
            this.setData(a({}, i, 0));
        },

        onPullDownRefresh() {
            console.log('占位：函数 onPullDownRefresh 未声明');
        },

        onReachBottom() {
            console.log('占位：函数 onReachBottom 未声明');
        },

        ifagreeFn() {
            console.log('占位：函数 ifagreeFn 未声明');
        },

        ifagree_passFn() {
            console.log('占位：函数 ifagree_passFn 未声明');
        }
    }
};
</script>
<style>
@import 'qun.css';
</style>
